<template>
    <div 
        :style="containerStyle"
        class="grid transition-[all_0.5s_ease]"
    >
        <div 
            v-for="(item, index) in props.size * props.size" 
            class="flex rounded-[8px] cursor-pointer transition-[all_0.5s_ease]"
            :style="{ backgroundColor: getBoxColor(index)}"
            @click="clickItem(index)"
        >
        </div>
    </div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue';

const emit = defineEmits(['select'])

const props = defineProps
(
    {
        size: 
        {
            type: Number,
            default: 2,
        },
        difficultyLevel:
        {
            type: Number,
            default: 2,
        }
    }
)

const randomNumber = ref(0);

onMounted
(
    () =>
    {
        color.value = colorPool[Math.floor(Math.random() * colorPool.length)];
        randomNumber.value = Math.floor(Math.random() * (props.size * props.size));
    }
)

const clickItem = (index) =>
{
    emit('select', index === randomNumber.value)
}

const getBoxColor = (current) =>
{
    if (current === randomNumber.value)
    {
        const tmp = (30 - props.difficultyLevel)
        if (Math.random() < 0.5)
        {
            return adjustColorBrightness(color.value, tmp)
        }
        else
        {
            return adjustColorBrightness(color.value, -tmp)
        } 
        
    }
    
    return color.value
}

const adjustColorBrightness = (hexColor, factor) =>
{
  // 确保输入是有效的十六进制颜色
  if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
    throw new Error("Invalid hex color");
  }

  // 将十六进制颜色转换为 RGB
  const hexToRgb = (hex) => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
  };

  // 将 RGB 转换回十六进制
  const rgbToHex = (r, g, b) => {
    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
  };

  // 获取 RGB 分量
  const { r, g, b } = hexToRgb(hexColor);

  // 调整亮度
  const newR = Math.min(255, Math.max(0, r + factor));
  const newG = Math.min(255, Math.max(0, g + factor));
  const newB = Math.min(255, Math.max(0, b + factor));

  // 返回新的颜色
  return rgbToHex(newR, newG, newB);
}

const color = ref('#8ABBD9')

const containerStyle = computed
(
    () =>
    {
        if (props.size < containerStyleList.length)
        {
            return containerStyleList[props.size]
        }

        return {
            width: '680px',
            height: '680px',
            gap: '24px',
            gridTemplateColumns: `repeat(${props.size}, 1fr)`,  
            gridTemplateRows: `repeat(${props.size}, 1fr)`,
        }
    }
)

const containerStyleList = 
[
    [],
    [],
    {
        width: '440px',
        height: '440px',
        gap: '30px',
        gridTemplateColumns: 'repeat(2, 1fr)',  
        gridTemplateRows:'repeat(2, 1fr)',
    },
    {
        width: '660px',
        height: '660px',
        gap: '30px',
        gridTemplateColumns: 'repeat(3, 1fr)',  
        gridTemplateRows:'repeat(3, 1fr)',
    },
    {
        width: '680px',
        height: '680px',
        gap: '24px',
        gridTemplateColumns: 'repeat(4, 1fr)',  
        gridTemplateRows:'repeat(4, 1fr)',
    },
]

const colorPool = 
[
    '#8ABBD9',
    '#A4E6B8',
    '#F6A557',
    '#D68CBB',
    '#F4D06E',
    '#6C7C99',
    '#B8E4F0',
    '#4B3E5D',
    '#F9C2B5',
    '#B06A9A',
    '#64A7DE',
    '#DE6464',
    '#646ADE',
    '#1DD0BE',
]

const refreshColor = () =>
{
    color.value = colorPool[Math.floor(Math.random() * colorPool.length)];
    randomNumber.value = Math.floor(Math.random() * (props.size * props.size));
}

defineExpose
(
    {
        refreshColor,
    }  
)

</script>
<style scoped>
*
{
    color: #5a7777;
} 
</style>
